<template>
  <div class="home">
    <!-- 头部数据 -->
    <div id="top">
      <div id="top-left" style="font-size: 1.5625rem;">2023年04月05日 <span style="margin: .625rem;">15:20</span>
        <span>星期三</span>
      </div>
      <div id="top-center" style="font-size: 2.1875rem;">
        Al视频分析告警联动平台
      </div>
      <div id="top-right" style="font-size: 1.25rem;">
        <span>工作台</span>
        <span>管理员</span>
        <span>全屏</span>
      </div>
    </div>
    <div id="center">
      <!-- 左边大盒子 -->
      <div id="center-left">
        <!-- <div class="MinBox">
          <div class="MinBox-top">
            <span>资源情况</span>
            <span class="title-right">详情</span>
          </div>
          <div class="bar">

          </div>
        </div> -->
        <div class="my_modle">
          <MinBox>
            <Resource/>
          </MinBox>
        </div>

        <div class="my_modle">
          <MinBox>
            <!-- 组件 -->
            <div>
            </div>
          </MinBox>
        </div>
        <div class="my_modle">
          <MinBox>
            <!-- 组件 -->
            <Warnstatistics />
          </MinBox>
        </div>
        <div class="my_modle">
          <MinBox>
            <!-- 组件 -->
            <div>

            </div>
          </MinBox>
        </div>

      </div>
      <div id="center-center"></div>
      <div id="center-right">
        <div class="my-right">
          <MinBox>
            <!-- 组件 -->
            <div>
            </div>
          </MinBox>
        </div>
        <div class="my-right">
          <MinBox>
            <!-- 组件 -->
            <div>
            </div>
          </MinBox>
        </div>
        <div class="my-right">
          <MinBox>
            <!-- 组件 -->
            <div>
            </div>
          </MinBox>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import MinBox from '@/components/minBox.vue'
import Warnstatistics from '@/components/warnstatistics.vue';
import Resource from '@/components/resource.vue'
import * as echarts from 'echarts';


export default {
  name: 'HomeView',
  components: {
    HelloWorld,
    MinBox,
    Warnstatistics,
    Resource
  },
  mounted() {

  },


}
</script>
<style lang="scss" scoped>
// 告警统计

// .MinBox {
//   height: 15.4375rem;
//   background-color: #778ca9;
//   .MinBox-top {
//     height: 2.5rem;
//     border: .125rem solid black; 
//     box-sizing: border-box;
//     font-size: .9375rem;
//     letter-spacing:.3125rem;
//     // line-height: 2.0625rem;
//     padding: .8125rem .625rem .5625rem 1.25rem;
//     border-image: linear-gradient(to bottom, #0f102d, #0176ea) 1; //边框渐变
//     background-image: linear-gradient(to bottom, #0f102d, #0d1e5e); //背景渐变
//     box-shadow: 0 0 .3125rem#0176ea;  //盒子阴影
//     .title-right{
//       float: right;
//       color: #778ca9;
//     }
//   }
// }

#top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  align-items: center;
  height: 3.125rem;

  #top-right {
    span {
      margin-right: .625rem;
    }
  }
}



#center {
  margin-top: 1.25rem;
  display: flex;
  height: calc(100vh - 4.375rem);

  #center-left,
  #center-right {
    width: 33.75rem;
    height: 100%;
    background-color: red;

  }

  #center-right .my-right {
    height: 33.33%;
  }

  #center-left .my_modle {
    height: 25%;
  }

  #center-center {
    width: 46.5625rem;
    background-color: aquamarine;
    margin: 0 1.5625rem;
  }
}
</style>

